<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <title>我的订单</title>
  <style>
    body {
      background-color: #121212;
      color: #e0e0e0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      position: relative;
      min-height: 100vh;
    }

    h1 {
      text-align: center;
      color: #aa9bf9;
      font-size: 2rem;
      margin: 20px 0;
    }

    .order-list {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      max-width: 900px;
      margin: 0 auto;
    }

    .order-card {
      background-color: #2c2c2c;
      border: 1px solid #444;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .order-info {
      flex: 1;
    }

    .order-info h3 {
      color: #ffffff;
      margin-bottom: 10px;
    }

    .order-info p {
      color: #ccc;
      font-size: 0.9rem;
      margin: 5px 0;
    }

    .order-type {
      font-weight: 700;
      color: #aa9bf9;
      margin-left: 20px;
      white-space: nowrap;
    }

    .back-home-btn {
      position: fixed;
      top: 20px;
      left: 20px;
      background-color: #aa9bf9;
      color: #121212;
      padding: 10px 18px;
      border-radius: 6px;
      font-weight: 700;
      text-decoration: none;
      font-size: 16px;
      z-index: 1000;
      transition: background-color 0.3s ease;
    }

    .back-home-btn:hover {
      background-color: #8c7ee6;
    }

    .user-link {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: #aa9bf9;
      color: #121212;
      padding: 10px 20px;
      font-weight: 700;
      font-size: 16px;
      border-radius: 6px;
      text-decoration: none;
      z-index: 1000;
    }

    .user-link:hover {
      background-color: #8c7ee6;
    }
  </style>
</head>
<body>
<a href="main.html" class="back-home-btn">返回主页</a>
<div id="topUser"></div>

<h1>我的订单</h1>

<div id="app">
  <div class="order-list">
    <div class="order-card" v-for="order in orderList" :key="order.orderId">
      <div class="order-info">
        <h3>订单编号：{{ order.orderId }}</h3>
        <p>饰品：{{ order.equipmentName }}</p>
        <p>价格：¥{{ order.orderPrice }}</p>
        <p>下单时间：{{ formatTime(order.orderCreateTime) }}</p>
        <p>交易对象：{{ getTradePartner(order) }}</p>
        <p>状态：{{ statusMap[order.status] || '未知' }}</p>
      </div>
      <div class="order-type">
        {{ order.buyerId == userId ? '购入订单' : '卖出订单' }}
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#topUser',
    data: {
      userName: localStorage.getItem('userName') || ''
    },
    template: `
      <a v-if="userName" href="user.html" class="user-link">{{ userName }}</a>
    `
  });

  new Vue({
    el: '#app',
    data: {
      orderList: [],
      userId: localStorage.getItem('userId'),
      statusMap: {
        0: '未发货',
        1: '已发货',
        2: '已完成',
        3: '已取消'
      }
    },
    mounted() {
      this.getOrders();
    },
    methods: {
      getOrders() {
        if (!this.userId) {
          alert("请先登录！");
          location.href = "login.html";
          return;
        }
        axios.get("/ffub/orders/" + this.userId).then(res => {
          if (res.data.code === 200) {
            this.orderList = res.data.data
                    .filter(order => order.buyerId == this.userId || order.sellerId == this.userId)
                    .sort((a, b) => new Date(b.orderCreateTime) - new Date(a.orderCreateTime));  // 时间倒序排序
          } else {
            alert("获取订单失败：" + res.data.msg);
          }
        }).catch(err => {
          alert("请求错误：" + err);
        });

      },
      formatTime(timeStr) {
        return timeStr ? timeStr.replace('T', ' ').slice(0, 19) : '';
      },
      getTradePartner(order) {
        if (order.buyerId == this.userId) {
          return '卖家ID：' + order.sellerId;
        } else {
          return '买家ID：' + order.buyerId;
        }
      }
    }
  });
</script>
</body>
</html>
